<template>
<div class="front-page-container">
  <div class="front-page">
    <goods-sourse2 :cgoods="goods" @handleSearch="handleSearch"></goods-sourse2>
    <pagination @item-click="pageClick" 
      :cUrl="url"
      :cTotal="total"
      :cPageSize="pageSize"
      :cTotalPage="totalPage">>
    </pagination>
  </div>
  <div class="right-info">
    <div class="free-btn">
      <img src="../assets/img/fabuxinxi2.png" @click="toPublish">   
    </div>
    <div class="top-info">
      <div style="font-size:18px"><strong>近期热门信息</strong></div>
      <div class="item-info" v-for="(item,index) in goodsTopics" :key="index" @click="handleDetail(item)">{{index+1}}、{{item.content}}</div>  
    </div>
  </div>
</div>

</template>
<script>
import { selectAllPage, selectGoodsPage } from "../api/order";
import GoodsSourse2 from "../components/GoodsSource2.vue";
import Pagination from "../components/Pagination.vue";

export default {
  data() {
    return {
      goods: [],
      goodsTopics: [],
      total: 0,
      totalPage: 0, // 在data中声明totalPage
      pageSize: 10,
      url: "/order/All/",
      searchValue: '',
      goodsCount2: sessionStorage.getItem("/order/All/pageCode")
        ? sessionStorage.getItem("/order/All/pageCode")
        : 1,
    };
  },
  mounted() {
    this.getData();
    this.getTopicData();
  },
  methods: {
    getData() {
      this.$store.commit("updateActiveIndex", "1");
      selectAllPage({
        keys: this.searchValue,
        pageNum: this.goodsCount2,
      }).then((res) => {
        if (res.flag === true) {
          this.goods = res.data.list;
          this.total = res.data.total;
          this.totalPage = res.data.pages; // 从接口获取总页数并赋值给totalPage
        } else {
          // alert(res.data.data);
        }
      });
    },
    getTopicData() {
      selectGoodsPage({
        pageNum: '1',
        keys: '',
      }).then((res) => {
        if (res.flag === true) {
          let tmp = res.data.list;
          tmp.forEach((e, i) => {
            if (i < 10) {
              this.goodsTopics.push(e);
            }
          });
        } else {
          // alert(res.data.data);
        }
      });
    },
    pageClick(item) {
      this.goods = item;
    },
    // 发布信息
    toPublish() {
      if (localStorage.getItem('token')) {
        this.$router.push("/home/addmessage/publishgoods").catch((err) => err);
      } else {
        this.$router.push(`/login`).catch((err) => err);
      }
    },
    handleSearch(val) {
      this.searchValue = val;
      this.getData();
    },
    handleDetail(item) {
      this.$store.commit("updateOrderId", item.orderId);
      this.$router.push(`/home/details?orderId=${item.orderId}`).catch((err) => err);
    }
  },
  components: {
    Pagination,
    GoodsSourse2,
  },
};
</script>


<style lang="less" scoped>
.front-page-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1100px;
  margin: 10px auto;
}
.front-page {
  width: 780px;
  margin: 0 auto;
}
.item-info{
  line-height: 25px;
  cursor: pointer;
  &:hover{
    color: #035D1C;
    text-decoration: underline;
  }
}
.right-info{
  padding: 10px 20px;
  height: 1000px;
  width: 300px;
  min-height: 360px;
  background-color: #fff;
  .free-btn{
    text-align: center;
    cursor: pointer;
  }
  .top-info{
    font-size: 12px;
    margin-top: 20px;
  }
}
</style>